.o-checkbox {
  display : block;

  width : 1.25em;
  height : 1.25em;

  background : var(--main-bg-color);

  svg {
    width : 100%;
    height : 100%;

    transform : scale( 0, 0 );
    transition : transform .125s ease-in-out;

    fill : var(--npm-red);
  }

  input:checked + & {
    svg {
      transition : transform .125s cubic-bezier( 0, 0, 0.25, 1.75 );

      transform : scale( 1, 1 );
    }
  }

  input:focus + & {
    outline : .1875em solid var(--npm-red-dark);
  }
}
